<template>
  <div>
    <el-upload
      class="upload-demo"
      :action="url"
      multiple
      :headers="header"
      :limit="3"
      :before-upload="beforeUpload"
      :on-success="handleSuccess"
      :show-file-list="false"
    >
      <span>上传附件</span>
    </el-upload>
    <!-- 文件列表 -->
    <!-- <UploadList :fileList="fileList2"></UploadList> -->
    <UploadList :fileList="props.fileList"></UploadList>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import UploadList from './UploadList.vue'
import { useStore } from '@/pinia/index'
import dayjs from 'dayjs'
const pinia = useStore()
const url = ref('http://localhost:3000/common/upload')
const header = ref({
  Authorization: pinia.jwt
})

interface UploadFile {
  name: string
  createTime: string
  id: string
  resType: string
  operator: string
}
const fileList2 = ref<UploadFile[]>([])
//父组件传来的用于回显
const props = defineProps({
  fileList: {
    type: Array,
    default: () => []
  }
})
// 子组件通过事件向父组件传值
const toParent = defineEmits(['onSuccess', 'onDelete'])
//上传前
const beforeUpload = (file) => {
  const isLt2M = file.size / 1024 / 1024
  if (isLt2M > 10) {
    ElMessage({ message: '文件大小不能超过10M', type: 'error' })
    return false
  }
}
// 上传成功
const handleSuccess = (res) => {
  props.fileList.push(res.data)
  toParent('onSuccess', props.fileList)
}

onMounted(() => {})
</script>

<style lang="scss" scoped>
.file-box {
  .file-item {
    display: flex;
    margin-bottom: 10px;
    img {
      width: 16px;
      height: 16px;
    }
    .file-name {
    }
    .file-time {
    }
    .file-operator {
    }
  }
}
</style>
